<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>editorMultipleUploader主题</title>
    <script src="http://g.tbcdn.cn/kissy/k/1.4.2/seed-min.js" charset="utf-8"></script>
    <link href="http://a.tbcdn.cn/s/kissy/1.3.0rc/css/base.css" rel="stylesheet"/>
    <link href="/kissy/build/editor/theme/cool/editor.css" rel="stylesheet"/>

</head>
<body>
<h2>editorMultipleUploader主题</h2>
<ul>
    <li><a href="https://github.com/KF-kissyForm/butterfly/tree/master/gallery/uploader/1.5.4/themes/editorMultipleUploader" target="_blank">源码</a></li>
    <li>作者：承玉/明河</li>
    <li>描述：编辑器专用主题</li>
    <li>版本：1.4</li>
    <li>兼容：chrome、firefox、IE9、IE8、IE6</li>
</ul>
<div class="grid" style="margin-top: 20px;">
    <input type="file" class="g-u" id="J_UploaderBtn" value="上传图片" name="Filedata" >
    <input type="hidden" id="J_Urls" name="urls" value="" />
</div>
<div class="editor-uploader-queue-wrapper J_UploaderQueueWrapper" style="width:600px;margin-top: 20px;">
    <table class="ks-editor-upload-list" width="100%" border="0" border-spacing="0">
        <thead>
        <tr>
            <th>图片</th>
            <th>大小</th>
            <th style="width:30%">上传状态</th>
            <th>图片操作</th>
        </tr>
        </thead>
        <tbody id="J_UploaderQueue">

        </tbody>
    </table>

    <div class="uploader-footer">
        <a class="ks-editor-button ks-editor-multiple-upload-ok ks-inline-block J_StartUpload">开始上传</a>
        <a class="ks-editor-button ks-editor-multiple-upload-insertall ks-inline-block" style="margin-left:20px;">全部插入</a>
        <a class="ks-editor-uploader-clear J_ClearQueue">清空列表</a>
    </div>
</div>
<script>
    var S = KISSY;
    if(S.Config.debug){
        var srcPath = "../../../../";
        S.config({
            packages:[
                {
                    name:"gallery",
                    path:srcPath,
                    charset:"utf-8"
                }
            ]
        });
    }

    S.use('gallery/uploader/1.5.4/index,gallery/uploader/1.5.4/themes/editorMultipleUploader/index,gallery/uploader/1.5.4/themes/editorMultipleUploader/style.css', function (S, Uploader,EditorMultipleUploader) {
        //上传组件插件
        var plugins = 'gallery/uploader/1.5.4/plugins/auth/auth,' +
                'gallery/uploader/1.5.4/plugins/urlsInput/urlsInput,' +
                'gallery/uploader/1.5.4/plugins/proBars/proBars';

        S.use(plugins,function(S,Auth,UrlsInput,ProBars,Filedrop,Preview){
            var uploader = new Uploader('#J_UploaderBtn',{
                //处理上传的服务器端脚本路径
                action:"upload.php",
                type:['ajax','flash'],
                multiple:true,
                autoUpload:false
            });
            //使用主题
            uploader.theme(new EditorMultipleUploader({
                queueTarget:'#J_UploaderQueue'
            }))
                    //验证插件
                    uploader.plug(new Auth({
                        //最多上传个数
                        max:3,
                        //图片最大允许大小
                        maxSize:2000
                    }))
                    //url保存插件
                    .plug(new UrlsInput({target:'#J_Urls'}))
                    //进度条集合
                    .plug(new ProBars({isHide:false}))
            ;

            var $ = S.Node.all;
            var $queueWrapper = $('.J_UploaderQueueWrapper');
            uploader.on('add',function(ev){
                if($queueWrapper.css('display') == 'none'){
                    $queueWrapper.fadeIn(0.5);
                }
            })
            uploader.on('remove',function(ev){
                if(!uploader.get('queue').get('files').length){
                    $queueWrapper.fadeOut(0.5);
                }
            })
            var queue = uploader.get('queue');
            $('.J_ClearQueue').on('click',function(ev){
                ev.preventDefault();
                queue.clear();
            })
            $('.J_StartUpload').on('click',function(){
                uploader.uploadFiles('waiting');
            })
        });
    })

</script>
</body>
</html>